<template>
    <div id="index">
        <div class="head">
              <el-row>
                <el-col :span="4" :offset="1"><div class="name">小区蔬菜后台管理系统</div></el-col>
                <el-col :span="3" :offset="16">
                   <div class="grid-content bg-purple">
                       <el-dropdown >
                          <span class="el-dropdown-link">
                            用户信息<i class="el-icon-arrow-down el-icon--right"></i>
                          </span>
                          <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item command="a">退出登录</el-dropdown-item>
                          </el-dropdown-menu>
                        </el-dropdown>
                   </div>
               </el-col>
              </el-row>    
        </div>
        <div class="content">    
                <el-col :span="4"  style="height:100%;">
                 <div class="nav">
                    <el-menu
                          :router=true
                          default-active="/index/dashboard"
                          class="el-menu-vertical-demo"
                          background-color="#545c64"
                          text-color="#fff"
                          active-text-color="#ffd04b">                
                               <el-menu-item index="/index/dashboard">
                                  <i class="el-icon-menu"></i>
                                  <span slot="title">系统首页</span>
                               </el-menu-item>

                                  <el-submenu index="1">
                                      <template slot="title">
                                        <i class="el-icon-location"></i>
                                        <span>蔬菜商品管理</span>
                                      </template>
                                      <el-menu-item-group>
                                        <el-menu-item index="/index/goodsList">蔬菜列表</el-menu-item>
                                        <el-menu-item index="/index/addGoods">添加蔬菜</el-menu-item>
                                      </el-menu-item-group>
                                   </el-submenu>

                                  <el-submenu index="2">
                                      <template slot="title">
                                        <i class="el-icon-location"></i>
                                        <span>会员管理</span>
                                      </template>
                                      <el-menu-item-group>
                                         <el-menu-item index="memberList">会员列表</el-menu-item>
                                         <el-menu-item index="memberAdd">添加会员</el-menu-item>                
                                         <el-menu-item index="yibanList">一般投放柜管理</el-menu-item>
                                         <el-menu-item index="xhList">鲜活投放柜管理</el-menu-item>
                                      </el-menu-item-group>
                                   </el-submenu>


                                   <el-submenu index="3">
                                      <template slot="title">
                                        <i class="el-icon-location"></i>
                                        <span>供应商管理</span>
                                      </template>
                                      <el-menu-item-group>
                                        <el-menu-item index="gongyingshangList">供应商信息</el-menu-item>
                                        <el-menu-item index="addGongyingshang">添加供应商</el-menu-item>
                                      </el-menu-item-group>
                                   </el-submenu>

                                   
                                 <el-menu-item index="orderList">
                                    <i class="el-icon-menu"></i>
                                    <span slot="title">订单管理</span>
                                 </el-menu-item>

                                   <el-submenu index="5">
                                      <template slot="title">
                                        <i class="el-icon-location"></i>
                                        <span>采购信息管理</span>
                                      </template>
                                      <el-menu-item-group>
                                        <el-menu-item index="caigouList">采购列表</el-menu-item>
                                      </el-menu-item-group>
                                   </el-submenu>
                        </el-menu>
                  </div>
                </el-col>
                <el-col :span="20" style="height:100%;"><div><router-view ></router-view></div></el-col>
        </div>        
    </div>
</template>
<script>

     export default{
       name:"Index",
            data() {
              console.log(process.env);
              return {
                activeIndex: '1',
                activeIndex2: '1'
              }
            },
            
            
            //从vuex 拿到的一切数据，状态都放到computed里面
            computed:{
           
            },
   
            mounted(){
 
            },

          methods: {
                handleOpen(key, keyPath) {
                  //console.log(key, keyPath);
                },
                handleClose(key, keyPath) {
                  //console.log(key, keyPath);
                },
                 handleSelect(key, keyPath) {
                    console.log(key, keyPath);
                  }
              }
     }
    
</script>
<style lang="less" scope>
   #index{
     width:100%;
     height:100%;
     background-color:#f5f5f5;
   }  
     .head{
        width:100%;
        height:60px;
       background-color:#545c64;
     }

    .content{
       width:100%;
       height:100%;
    }

    .nav{
      width: 100%;
      height: 100%;
      background-color:rgb(84, 92, 100);
    }
    .right{
      height:100%;

    }

  .name{
    margin-top: 0.2rem;
    color: #a5d5e0;
    font-size:0.3rem;
  }
  .bg-purple {
    background: #d3dce6;
  }

  .grid-content {
    border-radius: 4px;
    min-height: 100%;
    font-size:0.3rem;
    margin: 0 auto;
    width:1.2rem;
    height:0.8rem;
  }



 el-dropdown-link {
    cursor: pointer;
    color: #409EFF;
  }
  .el-icon-arrow-down {
    font-size: 12px;
  }
</style>